<template>
  <view class="content">
    <view class="vTabs">
      <view class="vTabsTitleList">
        <view :class="['vTabsTitle', activeTabId === item.kind ? 'vTabsTitleActive' : '']" @click="changeActiveTabId(item.kind)" v-for="item in FoodData" :key="item.id">{{
          categoryNameMap.get(item.id)
        }}</view>
      </view>
      <scroll-view :scroll-into-view="activeTabId" scroll-with-animation scroll-y class="vTabsContentList">
        <view v-for="foodMenu in FoodData" :key="foodMenu.id" :id="foodMenu.kind" class="foodCard">
          <view class="kindTitle">{{ categoryNameMap.get(foodMenu.id) }}</view>
          <view class="vTabsContent" v-for="item in foodMenu.food" :key="item.id">
            <foodVue :idx="item.id" :src="item.coverImg" :title="item.title" :detail="item.detail" :singlePrice="item.price" />
          </view>
        </view>
        <view style="height: 180rpx"></view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, getCurrentInstance, onMounted, onUnmounted } from "vue";
import fuiButton from "@/components/firstui/fui-button/fui-button.vue";
import foodVue from "@/components/project/food/food.vue";
import Nav from "@/router";
import Service from "@/service";

onMounted(() => {});

Service.Shop.category()
  .then(res => {
    for (const item of res.data) {
      categoryNameMap.set(item.id + "", item.name);
    }
    console.log(categoryNameMap);
  })
  .then(() => {
    Service.Shop.productList().then(res => {
      console.log(res);
      for (const item of res.data) {
        if (!categoryProductMap.hasOwnProperty(item.category)) {
          categoryProductMap[item.category] = [];
        }
        categoryProductMap[item.category].push(item);
      }
      let temp: any[] = [];
      for (const key in categoryProductMap) {
        temp.push({
          id: key + "",
          kind: "menu" + key,
          food: categoryProductMap[key],
        });
      }
      FoodData.value = temp;
      activeTabId.value = FoodData.value[0].kind;
      console.log(FoodData.value);
    });
  });
const categoryNameMap = reactive(new Map());
const categoryProductMap = reactive<{ [x: number]: Array<any> }>({});
onUnmounted(() => {});
const FoodData = ref<Array<any>>([]);
const activeTabId = ref("");
const changeActiveTabId = (id: string) => {
  activeTabId.value = id;
};
</script>

<style scoped>
.content {
  height: calc(100vh - 120rpx);
  /* padding-bottom: 120rpx; */
}

.vTabs {
  width: 750rpx;
  height: calc(100vh - 120rpx);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vTabsTitleList {
  height: calc(100vh - 120rpx);
  width: 200rpx;
  background-color: white;
  position: relative;
}
.vTabsContentList {
  height: calc(100vh - 120rpx);
  width: 550rpx;
  background-color: #f4f4f4;
}
.foodCard {
  margin: 40rpx 0;
  padding-top: 20rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  background-color: white;
}
.kindTitle {
  font-size: 37rpx;
  height: 50rpx;
  line-height: 50rpx;
  width: fit-content;
  padding: 10rpx;
  margin-left: 40rpx;
  position: relative;
  color: black;
  border-radius: 5rpx;
}
.kindTitle::before {
  content: "";
  position: absolute;
  left: -10rpx;
  top: 10rpx;
  width: 10rpx;
  height: 50rpx;
  background-color: black;
}
.vTabsTitle {
  width: 190rpx;
  margin: 5rpx;
  min-height: 90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  color: black;
  background-color: white;
  box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.3) inset;
  position: relative;
  transition: all 0.3s;
}
.vTabsTitle::before {
  content: "";
  height: 100rpx;
  width: 10rpx;
  position: absolute;
  left: 10rpx;
  top: -5rpx;
  background-color: white;
}
.vTabsTitleActive {
  background-color: #999;
  color: white;
  box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.3);
}
.vTabsContent {
  margin: 10rpx;
  width: 530rpx;
  height: 210rpx;
}
</style>
